<template>
  <section class="partner-section">
    <div class="section-container">
      <h2 class="section-title">合作伙伴</h2>
      <div class="partner-scroll">
        <!-- 第一排 -->
        <div class="scroll-row">
          <div class="scroll-track" :style="{ '--duration': '80s' }">
            <div v-for="(partner, index) in partners.slice(0, 16)" 
                 :key="'top-' + index" 
                 class="partner-item">
              <img :src="partner.logo" :alt="partner.name" />
            </div>
            <!-- 复制一份实现无缝滚动 -->
            <div v-for="(partner, index) in partners.slice(0, 16)" 
                 :key="'top-repeat-' + index" 
                 class="partner-item">
              <img :src="partner.logo" :alt="partner.name" />
            </div>
          </div>
        </div>
        
        <!-- 第二排 (反向滚动) -->
        <div class="scroll-row">
          <div class="scroll-track reverse" :style="{ '--duration': '80s' }">
            <div v-for="(partner, index) in partners.slice(16)" 
                 :key="'bottom-' + index" 
                 class="partner-item">
              <img :src="partner.logo" :alt="partner.name" />
            </div>
            <!-- 复制一份实现无缝滚动 -->
            <div v-for="(partner, index) in partners.slice(16)" 
                 :key="'bottom-repeat-' + index" 
                 class="partner-item">
              <img :src="partner.logo" :alt="partner.name" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
import { defineComponent } from 'vue'
// 导入所有logo图片
import logo1 from '@/assets/newMain/coors/logo1.png'
import logo3 from '@/assets/newMain/coors/logo3.png'
import logo4 from '@/assets/newMain/coors/logo4.png'
import logo5 from '@/assets/newMain/coors/logo5.png'
import logo6 from '@/assets/newMain/coors/logo6.png'
import logo7 from '@/assets/newMain/coors/logo7.png'
import logo8 from '@/assets/newMain/coors/logo8.png'
import logo9 from '@/assets/newMain/coors/logo9.png'
import logo10 from '@/assets/newMain/coors/logo10.png'
import logo12 from '@/assets/newMain/coors/logo12.png'
import logo13 from '@/assets/newMain/coors/logo13.png'
import logo14 from '@/assets/newMain/coors/logo14.png'
import logo15 from '@/assets/newMain/coors/logo15.png'
import logo16 from '@/assets/newMain/coors/logo16.png'
import logo17 from '@/assets/newMain/coors/logo17.png'
import logo18 from '@/assets/newMain/coors/logo18.png'
import logo19 from '@/assets/newMain/coors/logo19.png'
import logo20 from '@/assets/newMain/coors/logo20.png'
import logo21 from '@/assets/newMain/coors/logo21.png'
import logo22 from '@/assets/newMain/coors/logo22.png'
import logo23 from '@/assets/newMain/coors/logo23.png'
import logo24 from '@/assets/newMain/coors/logo24.png'
import logo25 from '@/assets/newMain/coors/logo25.png'
import logo26 from '@/assets/newMain/coors/logo26.png'
import logo27 from '@/assets/newMain/coors/logo27.png'
import logo28 from '@/assets/newMain/coors/logo28.png'
import logo29 from '@/assets/newMain/coors/logo29.png'
import logo30 from '@/assets/newMain/coors/logo30.png'
import logo31 from '@/assets/newMain/coors/logo31.png'
import logo32 from '@/assets/newMain/coors/logo32.png'
import logo33 from '@/assets/newMain/coors/logo33.png'

export default defineComponent({
  name: 'PartnerSection',

  setup() {
    const partners = [
      { logo: logo1, name: '合作伙伴1' },
      { logo: logo3, name: '合作伙伴2' },
      { logo: logo4, name: '合作伙伴3' },
      { logo: logo5, name: '合作伙伴4' },
      { logo: logo6, name: '合作伙伴5' },
      { logo: logo7, name: '合作伙伴6' },
      { logo: logo8, name: '合作伙伴7' },
      { logo: logo9, name: '合作伙伴8' },
      { logo: logo10, name: '合作伙伴9' },
      { logo: logo12, name: '合作伙伴10' },
      { logo: logo13, name: '合作伙伴11' },
      { logo: logo14, name: '合作伙伴12' },
      { logo: logo15, name: '合作伙伴13' },
      { logo: logo16, name: '合作伙伴14' },
      { logo: logo17, name: '合作伙伴15' },
      { logo: logo18, name: '合作伙伴16' },
      { logo: logo19, name: '合作伙伴17' },
      { logo: logo20, name: '合作伙伴18' },
      { logo: logo21, name: '合作伙伴19' },
      { logo: logo22, name: '合作伙伴20' },
      { logo: logo23, name: '合作伙伴21' },
      { logo: logo24, name: '合作伙伴22' },
      { logo: logo25, name: '合作伙伴23' },
      { logo: logo26, name: '合作伙伴24' },
      { logo: logo27, name: '合作伙伴25' },
      { logo: logo28, name: '合作伙伴26' },
      { logo: logo29, name: '合作伙伴27' },
      { logo: logo30, name: '合作伙伴28' },
      { logo: logo31, name: '合作伙伴29' },
      { logo: logo32, name: '合作伙伴30' },
      { logo: logo33, name: '合作伙伴31' }
    ]

    return {
      partners
    }
  }
})
</script>

<style lang="scss" scoped>
.partner-section {
  padding: $spacing-extra-large 0;
  background-color: $background-color-white;
  overflow: hidden;
}

.section-container {
  max-width: $container-width;
  margin: 0 auto;
}

.section-title {
  font-size: $font-size-extra-large;
  color: $text-primary;
  text-align: center;
  margin-bottom: $spacing-extra-large;
  font-weight: bold;
}

.partner-scroll {
  display: flex;
  flex-direction: column;
  gap: $spacing-large;
}

.scroll-row {
  width: 100%;
  overflow: hidden;
}

.scroll-track {
  display: flex;
  gap: $spacing-base;
  animation: scroll var(--duration) linear infinite;
  
  &.reverse {
    animation-direction: reverse;
  }
}

.partner-item {
  flex: 0 0 200px;
  height: 80px;
  
  img {
    width: 100%;
    height: 100%;
    border: 1px solid $border-color-lighter;
    object-fit: contain;
    transition: $transition-base;
    
    &:hover {
      box-shadow: $box-shadow-base;
      transform: scale(1.05);
    }
  }
}

@keyframes scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

// 当鼠标悬停在滚动区域时暂停动画
.scroll-row:hover .scroll-track {
  animation-play-state: paused;
}

@media screen and (max-width: 768px) {
  .partner-item {
    flex: 0 0 150px;
    height: 60px;
  }
}
</style> 